<script setup lang="ts">
import { watch, ref, nextTick, onBeforeUnmount } from 'vue'
import { useCategoryStore } from '@/stores'
import {
  getAttrListService,
  addAttrInfoService,
  deleteAttrService
} from '@/apis/product/attr'
import type {
  AttrList,
  AttrResponseData,
  Attr,
  AttrObj
} from '@/apis/product/attr/type'

const categoryStore = useCategoryStore()
// 定义Attr
const attrParams = ref<Attr>({
  attrName: '',
  attrValueList: [],
  categoryId: '',
  categoryLevel: 3
})
// 编辑
const onEdit = (row: AttrObj) => {
  scene.value = 2
  Object.assign(attrParams.value, JSON.parse(JSON.stringify(row)))
}
// 删除
const onDelete = async (attrId: number) => {
  await ElMessageBox.confirm('确认删除该属性吗？', '温馨提示', {
    type: 'warning',
    icon: 'Delete'
  })
  await deleteAttrService(attrId)
  await ElMessage.success('删除成功')
  getAttrList()
}
// 获取商品列表
const attrList = ref<AttrList>([])
watch(
  () => categoryStore.option3,
  async () => {
    await getAttrList()
  }
)
// 获取属性列表
const getAttrList = async () => {
  if (categoryStore.option3) {
    const res: AttrResponseData = await getAttrListService(
      categoryStore.option1,
      categoryStore.option2,
      categoryStore.option3
    )
    attrList.value = res.data
  }
}
// 切换场景
const scene = ref<number>(1)
const toggleScene = () => {
  attrParams.value.categoryId = categoryStore.option3
  scene.value = 2
  Object.assign(attrParams.value, {
    attrName: '',
    attrValueList: [],
    categoryId: '',
    categoryLevel: 3
  })
}
// 取消
const onCancel = () => {
  scene.value = 1
}
const focusArr: any = ref([])
// 添加属性值
const addAttrValue = () => {
  attrParams.value.categoryId = categoryStore.option3
  attrParams.value.attrValueList.push({
    valueName: '',
    flag: false
  })
  nextTick(() => {
    focusArr.value[attrParams.value.attrValueList.length - 1].focus()
  })
}
// 保存属性值
const onSave = async () => {
  await addAttrInfoService(attrParams.value)
  ElMessage.success(attrParams.value.id ? '修改成功' : '添加成功')
  scene.value = 1
  getAttrList()
}
//
// 查看
const toLook = (row: AttrObj, $index: number) => {
  if (row.valueName === '') {
    attrParams.value.attrValueList.splice($index, 1)
    return ElMessage.error('请输入属性值')
  }
  const index = attrParams.value.attrValueList.findIndex(
    (item) => item !== row && item.valueName === row.valueName
  )
  if (index !== -1) {
    attrParams.value.attrValueList.splice(index, 1)
    return ElMessage.error('该属性值已存在')
  }
  row.flag = true
}
// 编辑
const toEdit = (row: AttrObj, $index: number) => {
  row.flag = false
  nextTick(() => {
    focusArr.value[$index].focus()
  })
}
// 删除
const onDeleteAttr = (index: number) => {
  attrParams.value.attrValueList.splice(index, 1)
}

// 组件销毁清空categoryStore
onBeforeUnmount(() => {
  categoryStore.option1 = ''
  categoryStore.option2 = ''
  categoryStore.option3 = ''
})
</script>

<template>
  <!-- 分类 -->
  <Category :scene="scene" style="margin-bottom: 30px"></Category>
  <!-- 平台属性 -->
  <el-card v-show="scene === 1">
    <el-button
      type="primary"
      :disabled="!categoryStore.option3"
      icon="Plus"
      style="margin-bottom: 10px"
      @click="toggleScene"
      >添加平台属性</el-button
    >
    <el-table border :data="categoryStore.option3 ? attrList : []">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column label="属性名称" prop="attrName"></el-table-column>
      <el-table-column label="属性值名称">
        <template #default="{ row }">
          <el-tag
            v-for="item in row.attrValueList"
            :key="item.id"
            style="margin: 5px"
            >{{ item.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" align="center">
        <template #default="{ row }">
          <el-button
            type="warning"
            icon="Edit"
            @click="onEdit(row)"
          ></el-button>
          <el-button
            type="danger"
            icon="Delete"
            @click="onDelete(row.id)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>
  </el-card>
  <!-- 添加属性 -->
  <el-card v-show="scene === 2">
    <el-form style="width: 340px">
      <el-form-item label="属性名称">
        <el-input
          placeholder="请输入属性名称"
          v-model="attrParams.attrName"
        ></el-input>
      </el-form-item>
    </el-form>
    <div>
      <el-button
        type="primary"
        icon="Plus"
        @click="addAttrValue"
        :disabled="!attrParams.attrName"
        >添加属性值</el-button
      >
      <el-button type="primary" @click="onCancel">取消</el-button>
    </div>
    <!-- table -->
    <el-table border :data="attrParams.attrValueList" style="margin: 10px 0">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column label="属性值名称">
        <template #default="{ row, $index }">
          <el-input
            placeholder="请输入属性值名称"
            v-model.trim="row.valueName"
            v-show="!row.flag"
            :ref="(vc: any) => (focusArr[$index] = vc)"
            @blur="toLook(row, $index)"
            size="small"
          ></el-input>

          <div v-show="row.flag" @click="toEdit(row, $index)">
            {{ row.valueName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ $index }">
          <el-button
            type="danger"
            circle
            icon="Delete"
            @click="onDeleteAttr($index)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>
    <div>
      <el-button
        type="primary"
        @click="onSave"
        :disabled="attrParams.attrValueList.length === 0"
        >保存</el-button
      >
      <el-button type="primary" @click="onCancel">取消</el-button>
    </div>
  </el-card>
</template>
